<script>
export default {
  data(){
    return{
      person: ['张三','李四'],
      items: [{ message: 'Foo' }, { message: 'Bar' }],
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      personObj: {
        name: '张三',
        age: 18,
        sex: '男'
      }
    } 
  },
  methods:{
      addPerson: function(){
        this.person.unshift('赵六');
        // unshif表示再person数组的首位加元素
      }
  },
}
  
</script>

<template>
  <div>
      <!-- v-for使用数组，item代表数组中的每一个元素，index表叔数字元素的下标 -->
      <ul>
        <li v-for="item in person" :key="item">{{item}}</li>
      </ul>
      <!-- key问题：？ -->
      <ul>
        <li v-for="(item, index) in person" :key="item">{{index}}-{{item}}</li>
      </ul>

      <ul>
        <li v-for="(item, index) in person" :key="index">{{index}}-{{item}}</li>
      </ul>
      <!-- 可以用of -->
      <ul>
        <li v-for="(item, index) of person" :key="index">{{index}}-{{item}}</li>
      </ul>
      <ul>
        <li v-for="(item, index) in items" :key="item">{{index}}-{{item.message}}</li>
      </ul>

      <!-- v-for使用对象 -->
      <ul>
        <li v-for="value in myObject" :key="value">{{value}}</li>
      </ul>
      <ul>
        <li v-for="item in personObj" :key="item">{{item}}</li>
      </ul>
      <!-- item表示值，key表示键 -->
      <!-- 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 -->
      <!-- 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 -->
      <ul>
        <li v-for="(item, key) in personObj" :key="key">{{key}}-{{item}}</li>
      </ul>
      <p>----------------------</p>
      <!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute： -->
      <!-- 如果不使用key，虽然有红线，但是依然可以使用，而且控制台不报错。 -->
      <!-- 但是一定要加上KEY，因为这个是非常有必要的。 -->
      <!-- key：唯一标识，快速找到节点，减少渲染次数，提升渲染性能。 -->
      <!-- <ul>
        <li v-for="item in personObj"><input type="checkbox" name="" id="">{{item}}</li>
      </ul> -->
      <button @click="addPerson">增加人</button>
  </div>
</template>

<style> 

</style>
